<template>
  <div class="nav-component">
    <el-menu
      class="el-menu-vertical-demo"
      :default-active="appStore.app.currentRouter.path"
      text-color="#fff"
      :collapse="props.isCollapse"
    >
      <MenuItemDeal
        :menuList="data.menuList"
        :isCollapse="props.isCollapse"
      ></MenuItemDeal>
    </el-menu>
  </div>
</template>
<script setup>
import MenuItemDeal from "./MenuItemDeal.vue";
import { watchEffect, reactive, markRaw } from "vue";
import { routers } from "@/router";
import { usePermissionStore } from "@/stores/permissionStore";
import { useAppStore } from "@/stores/appStore";
import { searchRoute, deepCopy } from "@/utils/util";
const permissionStore = usePermissionStore();
const appStore = useAppStore();

const props = defineProps({
  isCollapse: {
    type: Boolean,
    default: () => false,
  },
});

const data = reactive({
  menuList: [],
});

// 监听权限表的变化，如果权限表有变则请求
watchEffect(async () => {
  data.menuList = dealNav([], deepCopy(permissionStore.getMenuList()));
});
// 处理路由
function dealNav(array, pageList = []) {
  pageList.forEach((routePath) => {
    if (routePath.path) {
      const item = searchRoute(routePath.path, deepCopy(routers));
      if (item?.layoutLevel) {
        // 第一级路由由于是布局路由，不需要显示，但是要判断
        if (routePath.children?.length) {
          array = dealNav(array, routePath.children);
        }
      } else if (item?.path && item?.meta?.showNav) {
        if (routePath?.children) {
          item.children = dealNav([], routePath.children);
        } else {
          item.children = undefined;
        }
        array.push(markRaw(item));
      }
    }
  });
  array = array.sort((a, b) => {
    // 页面根据路由定义的排序
    return a.index - b.index;
  });
  return array;
}
</script>
<style lang="scss" scoped>
.nav-component {
  width: 100%;
  height: 100%;
  .el-menu {
    height: 100%;
    overflow: auto;
    border: 0;
    @include bg_color("bg_color");
    @include text_color("text_color");
  }
}
</style>
